<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="shortcut icon" th:href="@{~/UI/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{~/UI/css/font.css}">
    <link rel="stylesheet" th:href="@{~/UI/css/xadmin.css}">

    <script th:src="@{~/UI/js/jquery.min.js}"></script>
    <script th:src="@{~/UI/lib/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{~/UI/js/xadmin.js}"></script>

</head>
<body class="login-bg" style="background-image: url(/images/login-bg-001.jpg); background-size: cover;">

    <div class="login layui-anim layui-anim-up"><br>
        <div><center><h2>注册</h2></center></div>
        <div id="darkbannerwrap"></div><br>

        <div class="layui-form" >
            <div class="layui-form-item">
                <input id="unameif" value="1" hidden>
                <input name="uname" id="uname" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" onblur="unameIsOnly()">
                <span id="unameSpan" style="color: red" hidden >用户名重复</span>
            </div>
            <hr class="hr15">
            <div class="layui-form-item">
                <input id="upassword1if" value="1" hidden>
                <input name="upassword1" id="upassword1" lay-verify="required" placeholder="密码" type="password" class="layui-input"onblur="passwordSame1()">
            </div>
            <hr class="hr15">
            <div class="layui-form-item">
                <input id="upassword2if" value="1" hidden>
                <input name="upassword2" id="upassword2" lay-verify="required" placeholder="确认密码" type="password" class="layui-input" onblur="passwordSame2()">
                <span id="upasswordSpan" style="color: red" hidden>两次输入的密码不同</span>
            </div>
            <hr class="hr15">
            <div class="layui-form-item">
                <input id="uphoneif1" value="1" hidden>
                <input id="uphoneif2" value="1" hidden>
                <input name="uphone" id="uphone" lay-verify="required" placeholder="电话"  type="text" class="layui-input" onblur="uphoneIf()">
                <span id="uphoneSpan1" style="color: red" hidden >手机号码格式不正确</span>
                <span id="uphoneSpan2" style="color: red" hidden >此手机号码已经注册过一次了</span>
            </div>
            <hr class="hr15">
            <div class="layui-form-item">
                <input id="ucidif1" value="1" hidden>
                <input id="ucidif2" value="1" hidden>
                <input name="ucid" id="ucid" lay-verify="required" placeholder="身份证号"  type="text" class="layui-input" onblur="ucidIf()">
                <span id="ucidSpan1" style="color: red" hidden >身份证号码格式不正确</span><br>
                <span id="ucidSpan2" style="color: red" hidden >此身份证号码已经注册过一次了</span>
            </div>
            <hr class="hr15">
            <div class="layui-form-item">
                <input value="注册" lay-submit lay-filter="login" style="width:100%;" type="submit" id="but">
            </div>
            <center><a th:href="@{/toIndex}">登录</a></center>
            <hr class="hr20" >
        </div>
    </div>

    <!--注册-->
    <script>
        $(function  () {
            layui.use('form', function(){
                var form = layui.form;
                // layer.msg('玩命卖萌中', function(){
                //   //关闭后的操作
                //   });
                //监听提交
                form.on('submit(login)', function(data){
                    var unameif = $("#unameif").val();
                    var upassword1if = $("#upassword1if").val();
                    var upassword2if = $("#upassword2if").val();
                    var uphoneif1 = $("#uphoneif1").val();
                    var uphoneif2 = $("#uphoneif2").val();
                    var ucidif1 = $("#ucidif1").val();
                    var ucidif2 = $("#ucidif2").val();
                    if (unameif == 0 && upassword1if == 0 && upassword2if == 0 && uphoneif1 == 0 && uphoneif2 == 0 && ucidif1 == 0 && ucidif2 == 0){
                        var uname = $("#uname").val();
                        var upassword = $("#upassword1").val();
                        var uphone = $("#uphone").val();
                        var ucid = $("#ucid").val();
                        var uflag = 0;
                        var utipe = 1;
                        $.ajax({
                            type: "post",
                            url: "/userInsert",
                            dataType: "json",
                            data: {'uname':uname,'upassword':upassword,'uphone':uphone,'ucid':ucid,'uflag':uflag,'utipe':utipe},
                            success: function (data) {
                                if (data == 0) {
                                    alert('注册成功，前去登录')
                                    //跳转页面
                                    window.open("toIndex",'_parent');
                                }else {
                                    layer.open({
                                        title: '提示'
                                        ,content: '注册失败'
                                    });
                                }
                            }
                        });
                    } else {
                        layer.msg("请确认信息后重试");
                    }

                });
            });
        })

    </script>

    <!--判断-->
    <script>

        //判断用户名重复
        function unameIsOnly() {
            var uname = $("#uname").val();
            $.ajax({
                type:"post",
                url:"/chong",
                dataType:"json",
                data:{uname:uname},
                success:function (data) {
                    if (data == 1){
                        $("#unameSpan").show();
                        $("#unameif").attr("value",1);
                        layer.msg("用户名重复");
                    }else if (data == 0){
                        $("#unameSpan").hide();
                        $("#unameif").attr("value",0);
                    }
                }
            });
        }

        //判断两次输入的密码是否相同1
        function passwordSame1() {
            var password1 = $("#upassword1").val();
            var password2 = $("#upassword2").val();
            if (password1 != password2){
                $("#upasswordSpan").show();
                $("#upassword1if").attr("value",1);
            }else {
                $("#upasswordSpan").hide();
                $("#upassword1if").attr("value",0);
                $("#upassword2if").attr("value",0);
            }
        }

        //判断两次输入的密码是否相同2
        function passwordSame2() {
            var password1 = $("#upassword1").val();
            var password2 = $("#upassword2").val();
            if (password1 != password2){
                $("#upasswordSpan").show();
                $("#upassword2if").attr("value",1);
            }else {
                $("#upasswordSpan").hide();
                $("#upassword1if").attr("value",0);
                $("#upassword2if").attr("value",0);
            }
        }

        //电话格式
        function uphoneIf() {
            let check = /^[1][3,4,5,7,8,9][0-9]{9}$/;
            let phone = $("#uphone").val();
            if(!check.test(phone)){
                $("#uphoneSpan1").show();
                layer.msg("手机号码格式不正确");
                $("#uphoneif1").attr("value",1);
            }else {
                $("#uphoneSpan1").hide();
                $("#uphoneif1").attr("value",0);
                uphoneIsOnly(phone);
            }
        }

        //判断电话重复
        function uphoneIsOnly(uphone) {
            $.ajax({
                type:"post",
                url:"/chong",
                dataType:"json",
                data:{uphone:uphone},
                success:function (data) {
                    if (data == 1){
                        $("#uphoneSpan2").show();
                        $("#uphoneif2").attr("value",1);
                        layer.msg("此电话号已经注册过一次了");
                    }else if (data == 0){
                        $("#uphoneSpan2").hide();
                        $("#uphoneif2").attr("value",0);
                    }
                }
            });
        }

        /*
            身份证格式
            二代身份证校验码的计算方法：
            二代身份证由17位数字和一位校验码组成
            将前面的身份证号码17位数分别乘以不同的系数。从第一位到第十七位的系数分别为：7－9－10－5－8－4－2－1－6－3－7－9－10－5－8－4－2。
            将这17位数字和系数相乘的结果相加。
            用加出来和除以11，得到余数
            余数只可能有0－1－2－3－4－5－6－7－8－9－10这11个数字。其分别对应的最后一位身份证的号码为1－0－X－9－8－7－6－5－4－3－2。
         */
        function ucidIf() {
            var ucid = $("#ucid").val();
            var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加权因子
            var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校验码
            if(/^\d{17}\d|x$/i.test(ucid)){
                var sum = 0, idx;
                for(var i = 0; i < ucid.length - 1; i++){
                    // 对前17位数字与权值乘积求和
                    sum += parseInt(ucid.substr(i, 1), 10) * arrExp[i];
                }
                // 计算模（固定算法）
                idx = sum % 11;
                // 检验第18位是否与校验码相等
                if ((arrValid[idx] == ucid.substr(17, 1).toUpperCase())){
                    $("#ucidSpan1").hide();
                    $("#ucidif1").attr("value",0);
                    ucidIsOnly(ucid);
                }else {
                    $("#ucidSpan1").show();
                    layer.msg("身份证号码格式不正确");
                    $("#ucidif1").attr("value",1);
                }
            }else{
                $("#ucidSpan1").show();
                layer.msg("身份证号码格式不正确");
                $("#ucidif1").attr("value",1);
            }
        }

        //判断身份证号重复
        function ucidIsOnly(ucid) {
            $.ajax({
                type:"post",
                url:"/chong",
                dataType:"json",
                data:{ucid:ucid},
                success:function (data) {
                    if (data == 1){
                        $("#ucidSpan2").show();
                        $("#ucidif2").attr("value",1);
                        layer.msg("身份证号重复");
                    }else if (data == 0){
                        $("#ucidSpan2").hide();
                        $("#ucidif2").attr("value",0);
                    }
                }
            });
        }

    </script>

</body>


</html>